import React from "react";
import {ScrollView, View} from "react-native";
import chjStyle from "../../../CustomStyle";
import ModuleCommonHeader from "../../../main/module/ModuleCommonHeader";
import CommonTextItem from "../../../main/record/common/CommonTextItem.js";
import SingleSelectionTextItem from "../../../main/record/common/SingleSelectionTextItem.js";
import InputTextItem from "../../../main/record/common/InputTextItem.js";
import SwitchTextItem from "../../../main/record/common/SwitchTextItem.js";
import CommonMultiListSelection from "../../../main/record/common/CommonMultiListSelection.js";
import Util from "../../../main/Util.js";
import NextButton from "../../../main/record/common/NextButton";
import {Actions} from "react-native-router-flux";

export default class HelpCarConfig extends React.Component {
    // 构造函数，可执行初始化操作
    constructor(props) {
        super(props);
        // 在ES6，在构造函数里初始化state
        this.state = {};
        const {carData} = props;
        if (!carData.carconfig) {
            carData.carconfig = Util.defaultCarconfig();
        }
    }

    // 组件被加载时
    componentDidMount() {

    }

    // 组件即将被卸载时
    componentWillUnmount() {
    }

    // 组件被渲染时
    render() {
        const {carData} = this.props;
        return (
            <View style={chjStyle.mainContainer}>
                <ModuleCommonHeader title='车辆配置(02)' clickedLeft={this.clickedBack.bind(this)} leftText='返回'
                                    clickedRight={this.clickedNew.bind(this)} rightText='保存'/>
                <ScrollView
                    style={chjStyle.mainList}>
                    <SingleSelectionTextItem object={carData.carconfig[0]}
                                             onSelectedListener={this.onSelected.bind(this)}
                                             optionArray={[{name: "黑色"}, {name: "白色"}, {name: "红色"}, {name: "黄色"}, {name: "蓝色"}, {name: "绿色"}, {name: "紫色"}, {name: "银灰"}, {name: "深色"}, {name: "香槟色"}, {name: "棕色"}, {name: "其它"}]}/>
                    <InputTextItem object={carData.carconfig[1]} autoCapitalize={'characters'}
                                   keyboardType={'numeric'} maxLength={19}
                                   onTextChangedListener={this.onTextChanged.bind(this)}/>
                    <InputTextItem object={carData.carconfig[2]} autoCapitalize={'characters'}
                                   keyboardType={'numeric'} maxLength={19}
                                   onTextChangedListener={this.onTextChanged.bind(this)}/>
                    <SingleSelectionTextItem object={carData.carconfig[3]}
                                             onSelectedListener={this.onSelected.bind(this)}
                                             optionArray={[{name: "92号汽油"}, {name: "95号汽油"}, {name: "98号汽油"}, {name: "90号汽油"}, {name: "93号汽油"}, {name: "97号汽油"}, {name: "0号柴油"}, {name: "5号柴油"}, {name: "10号柴油"}, {name: "-10号柴油"}, {name: "-20号柴油"}, {name: "-35号柴油"}, {name: "-50号柴油"}]}/>
                    <InputTextItem object={carData.carconfig[4]} autoCapitalize={'characters'}
                                   keyboardType={'numeric'} maxLength={19}
                                   onTextChangedListener={this.onTextChanged.bind(this)}/>
                    <InputTextItem object={carData.carconfig[5]} autoCapitalize={'characters'}
                                   keyboardType={'numeric'} maxLength={19}
                                   onTextChangedListener={this.onTextChanged.bind(this)}/>
                    <InputTextItem object={carData.carconfig[6]} autoCapitalize={'characters'}
                                   keyboardType={'numeric'} maxLength={19}
                                   onTextChangedListener={this.onTextChanged.bind(this)}/>
                    <SingleSelectionTextItem object={carData.carconfig[7]}
                                             onSelectedListener={this.onSelected.bind(this)}
                                             optionArray={[{name: "国五"}, {name: "国四"}, {name: "国三"}, {name: "国二"}, {name: "国一"}]}/>
                    <SingleSelectionTextItem object={carData.carconfig[8]}
                                             onSelectedListener={this.onSelected.bind(this)}
                                             optionArray={[{name: "AT"}, {name: "MT"}]}/>
                    <SingleSelectionTextItem object={carData.carconfig[9]}
                                             onSelectedListener={this.onSelected.bind(this)}
                                             optionArray={[{name: "无"}, {name: "1个"}, {name: "2个"}, {name: "3个"}, {name: "4个"}, {name: "5个"}, {name: "6个"}, {name: "7个"}, {name: "8个"}, {name: "8个以上"}]}/>
                    <SingleSelectionTextItem object={carData.carconfig[10]}
                                             onSelectedListener={this.onSelected.bind(this)}
                                             optionArray={[{name: "两驱"}, {name: "四驱"}, {name: "智能四驱"}, {name: "全时四驱"}]}/>
                    <SwitchTextItem object={carData.carconfig[11]}
                                    onValueChangedListener={this.onSelected.bind(this)} onValue='有' offValue='无'
                                    defaultState={true}/>
                    <SingleSelectionTextItem object={carData.carconfig[12]}
                                             onSelectedListener={this.onSelected.bind(this)}
                                             optionArray={[{name: "合金"}, {name: "钢材"}]}/>
                    <CommonTextItem object={carData.carconfig[13]}
                                    onClickedListener={this.onOtherClicked.bind(this)} ref='otherItem'/>
                </ScrollView>
                <NextButton onClickedListener={() => this.clickedNew()}/>
            </View>
        );
    }

    clickedBack() {
        Actions.pop();
    }

    clickedNew() {
        const {saveKey, carData} = this.props;
        carData.basicinfo.travelkilometer.value = carData.carconfig[1].value;
        Util.saveData(saveKey, carData);
        Actions.HelpCarFrame(
            {
                saveKey,
                carData,
            }
        );
    }

    onSelected() {
    }

    onTextChanged() {
    }

    onOtherClicked() {
        Actions.CommonMultiListSelection(
            {
                title: '其他重要配置',
                name: 'CommonMultiListSelection',
                component: CommonMultiListSelection,
                optionArray: [
                    "转向助力", "电动车窗", "天窗", "空调", "真皮座椅", "电动反光镜", "倒车雷达", "倒车影像", "定速巡航", "电吸门", "后排电动座椅", "自动泊车", "隔物板", "座椅加热", "一键启动", "大灯清洗", "导航", "电动遮阳帘", "多功能方向盘", "DVD/CD", "中控锁", "电动座椅", "底盘升降"],
                onResultListener: this.onOptionResult.bind(this),
                defaultValueArray: this.refs.otherItem.props.object.value
            }
        );
    }

    onOptionResult(resultArray) {
        this.refs.otherItem.props.object.value = resultArray;
        this.refs.otherItem.setState({
            v: resultArray.toString()
        });
    }
}
